<template>
  <div class="liteflow-node-toolbar">
    <!-- 前插按钮 -->
    <div
      v-if="toolbar.prepend"
      class="liteflow-add-node-prepend"
      @click="onPrepend"
    >
      <div
        class="liteflow-add-node-prepend-icon"
        title="前面插入节点"
      ></div>
    </div>

    <!-- 后插按钮 -->
    <div
      v-if="toolbar.append"
      class="liteflow-add-node-append"
      @click="onAppend"
    >
      <div
        class="liteflow-add-node-append-icon"
        title="后面插入节点"
      ></div>
    </div>

    <!-- 顶部工具栏(替换、删除) -->
    <div
      v-if="toolbar.replace || toolbar.delete"
      class="liteflow-top-toolbar"
    >
      <div
        v-if="toolbar.replace"
        class="liteflow-toolbar-btn"
        @click="onReplace"
        title="替换当前节点"
      >
        <svg width="16" height="16" viewBox="0 0 1024 1024" fill="currentColor">
          <path d="M880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32zm-622.3-84c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9z" />
        </svg>
      </div>
      <div
        v-if="toolbar.delete"
        class="liteflow-toolbar-btn liteflow-delete-node"
        @click="onDelete"
        title="删除节点"
      >
        <svg width="16" height="16" viewBox="0 0 1024 1024" fill="currentColor">
          <path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" />
        </svg>
      </div>
    </div>

    <!-- 底部工具栏(折叠/展开) -->
    <div
      v-if="toolbar.collapse"
      class="liteflow-bottom-toolbar"
      :class="{ show: toolbar.collapse }"
    >
      <div
        class="liteflow-toolbar-btn liteflow-collapse-node"
        @click="onCollapse"
        :title="collapsed ? '展开节点' : '折叠节点'"
      >
        <svg v-if="collapsed" width="12" height="12" viewBox="0 0 1024 1024" fill="currentColor">
          <path d="M328 544h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" />
          <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" />
        </svg>
        <svg v-else width="12" height="12" viewBox="0 0 1024 1024" fill="currentColor">
          <path d="M328 544h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" />
          <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { debounce } from 'lodash';
import { Modal } from 'ant-design-vue';
import { history } from '../core/history/index.js';

export default defineComponent({
  name: 'NodeToolBar',
  props: {
    node: {
      // X6 Node实例不是普通Object,移除类型验证
      required: true,
    },
  },
  setup(props) {
    const nodeData = computed(() => props.node.getData() || {});
    const model = computed(() => nodeData.value.model);
    const toolbar = computed(() => nodeData.value.toolbar || {
      append: true,
      delete: true,
      prepend: true,
      replace: true,
      collapse: false,
    });
    const collapsed = computed(() => model.value?.isCollapsed?.() || false);

    const showContextPad = debounce((info) => {
      props.node.model?.graph?.trigger('graph:showContextPad', info);
    }, 100);

    const onPrepend = (event) => {
      showContextPad({
        x: event.clientX,
        y: event.clientY,
        node: props.node,
        scene: 'prepend',
        title: '前面插入节点',
        edge: null,
      });
    };

    const onAppend = (event) => {
      showContextPad({
        x: event.clientX,
        y: event.clientY,
        node: props.node,
        scene: 'append',
        title: '后面插入节点',
        edge: null,
      });
    };

    const onReplace = (event) => {
      console.log('[NodeToolBar] 点击替换按钮');
      const currentModel = model.value;
      if (currentModel) {
        console.log('[NodeToolBar] 当前模型:', currentModel);
        props.node.model?.graph?.select(currentModel.getNodes?.() || []);
        props.node.model?.graph?.trigger('model:select', currentModel);
        console.log('[NodeToolBar] 触发 model:select 事件');
      }
      showContextPad({
        x: event.clientX,
        y: event.clientY,
        node: props.node,
        scene: 'replace',
        title: '替换当前节点',
        edge: null,
      });
    };

    const onDelete = debounce(() => {
      const currentModel = model.value;
      if (!currentModel) return;

      props.node.model?.graph?.select(currentModel.selectNodes?.() || []);
      props.node.model?.graph?.trigger('model:select', currentModel);

      Modal.confirm({
        title: '确认要删除选中的节点？',
        content: '点击确认按钮进行删除，点击取消按钮返回',
        onOk() {
          if (currentModel.remove?.()) {
            props.node.model?.graph?.cleanSelection();
            history.push();
          }
        },
      });
    }, 100);

    const onCollapse = debounce(() => {
      const currentModel = model.value;
      if (currentModel?.toggleCollapse) {
        currentModel.toggleCollapse();
        props.node.model?.graph?.trigger('model:change');
      }
    }, 100);

    return {
      toolbar,
      collapsed,
      onPrepend,
      onAppend,
      onReplace,
      onDelete,
      onCollapse,
    };
  },
});
</script>

<style lang="less" scoped>
.liteflow-node-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .liteflow-add-node-prepend {
    position: absolute;
    top: 5px;
    left: -18px;
    width: 18px;
    height: 20px;
    background-color: #d9d9d9;
    border-radius: 8px;
    cursor: pointer;

    .liteflow-add-node-prepend-icon {
      width: 100%;
      height: 100%;
      background: url(../core/assets/indicator-icons.svg) -1px 0px no-repeat;
      background-size: cover;
      filter: opacity(0.5);
    }

    &:hover .liteflow-add-node-prepend-icon {
      filter: opacity(1);
    }
  }

  .liteflow-add-node-append {
    position: absolute;
    top: 5px;
    right: -17px;
    width: 18px;
    height: 20px;
    background-color: #d9d9d9;
    border-radius: 8px;
    cursor: pointer;

    .liteflow-add-node-append-icon {
      width: 100%;
      height: 100%;
      background: url(../core/assets/indicator-icons.svg) -16px 0px no-repeat;
      background-size: cover;
      filter: opacity(0.5);
    }

    &:hover .liteflow-add-node-append-icon {
      filter: opacity(1);
    }
  }

  .liteflow-top-toolbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: -24px;
    left: 50%;
    width: 50px;
    height: 24px;
    margin-left: -25px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(64, 87, 109, 0.07),
      0 2px 12px rgba(53, 71, 90, 0.2);
  }

  .liteflow-toolbar-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 2px;

    &:hover {
      border: 1px solid #ccc;
      background-color: rgba(64, 87, 109, 0.07);
    }
  }

  .liteflow-delete-node {
    position: relative;
    color: #f54a45;

    &:before {
      position: absolute;
      top: 0;
      left: -4px;
      width: 1px;
      height: 18px;
      content: ' ';
      border-left: solid 1px rgba(57, 76, 96, 0.15);
    }
  }

  .liteflow-bottom-toolbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    top: 24px;
    left: 50%;
    width: 50px;
    height: 24px;
    margin-left: -25px;

    &.show {
      display: flex !important;
    }
  }

  .liteflow-collapse-node {
    position: relative;
    top: -2px;
    color: #c1c1c1;
    width: 12px;
    height: 12px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;

    &:hover {
      color: rgba(0, 0, 0, 0.85);
      background: #ffffff;
    }
  }

  .liteflow-add-node-prepend,
  .liteflow-add-node-append,
  .liteflow-top-toolbar,
  .liteflow-bottom-toolbar {
    display: none;
  }

  &:hover {
    .liteflow-add-node-prepend,
    .liteflow-add-node-append,
    .liteflow-top-toolbar,
    .liteflow-bottom-toolbar {
      display: flex;
    }
  }
}
</style>
